<template>
  <div class="rotation">
    <div class="imgBig">
      <div class="level">
        <el-image
          v-for="url in imgData.imgBig"
          :key="url + 123"
          v-bind:src="url"
        ></el-image>
        <!-- <img v-for="url in imgData.imgBig" :key="url" v-bind:src="url" /> -->
      </div>

      <div class="contro">
        <div class="mask"></div>
        <div class="preAndNext">
          <div v-on:click="preHandle" class="bt pre">
            <span class="el-icon-arrow-left"></span>
          </div>
          <div v-on:click="nextHandle" id="next" class="bt next">
            <span class="el-icon-arrow-right"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="imgSmall">
      <el-image
        v-for="(url, index) in imgData.imgSmall"
        :key="url + index"
        :index="index"
        v-on:click="imgClickHandle"
        v-bind:src="url"
      ></el-image>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgData: {
        imgBig: [
          "/static/img/details/d1.jpg",
          "/static/img/details/d2.jpg",
          "/static/img/details/d3.jpg",
          "/static/img/details/d4.jpg",
          "/static/img/details/d5.jpg",
          "/static/img/details/d6.jpg",
          "/static/img/details/d7.jpg",
        ],
        imgBigLoadedNum: 0, // 加载完成的大图数量，用于为按钮控件设置高度
        imgSmall: [
          "/static/img/details/d1.jpg",
          "/static/img/details/d2.jpg",
          "/static/img/details/d3.jpg",
          "/static/img/details/d4.jpg",
          "/static/img/details/d5.jpg",
          "/static/img/details/d6.jpg",
          "/static/img/details/d7.jpg",
        ],
      },
      now: 0,
      oneImgWidth: null,
    };
  },
  methods: {
    // 初始化空间的高度，需要等dom 和 Img都出现后才能正常获取
    initContro() {
      const imgBig = document.querySelector(".imgBig");
      const contro = document.querySelector(".contro");
      if (imgBig.offsetHeight < 10) {
        // 高度过小，说明图片还没加载出来
        setTimeout(() => {
          this.initContro();
        }, 300);
        return false;
      }
      contro.style.visibility = "visible";
      contro.style.height = imgBig.offsetHeight + "px";
      this.oneImgWidth = imgBig.querySelector("img").offsetWidth;
    },
    // 图片轮播动画
    ani() {
      const level = document.querySelector(".level");
      level.style.transform = "translateX(-" + this.now * this.oneImgWidth + "px)";
    },
    preHandle() {
      if(this.now <= 0) {
        return false
      }
      this.now--;
      this.ani();
    },
    nextHandle() {
      if(this.now >= this.imgData.imgBig.length - 1) {
        return false
      }
      this.now++;
      this.ani();
    },
    imgClickHandle(e) {
      this.now = e.target.getAttribute("index");
      this.ani();
    }
  },
  mounted() {
    this.initContro();
  },
};
</script>

<style lang="scss" scoped>
.rotation {
  float: left;
  width: calc(72% - 40px - 2px);
  margin-right: 40px;
  overflow: hidden;
  border-radius: 3px;
  .imgBig {
    border: 1px solid #dadada;
    float: left;
    width: calc(100% - 2px);
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    position: relative;
    .contro:hover {
      .mask,
      .preAndNext {
        opacity: 1;
      }
    }
    .contro {
      position: absolute;
      width: calc(100%);
      left: 0;
      top: 0;
      display: flex;
      align-items: center;
      transition: 0.5s;
      visibility: hidden;
      z-index: 2;
      .mask {
        transition: 0.3s;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          to right,
          rgba(0, 0, 0, 0.05) 0%,
          rgba(0, 0, 0, 0) 20%,
          rgba(0, 0, 0, 0) 80%,
          rgba(0, 0, 0, 0.05) 100%
        );
        position: absolute;
        z-index: -1;
        opacity: 0;
      }
      .preAndNext {
        width: 100%;
        padding: 0px 30px;
        opacity: 0;
        transition: 0.3s;
        .bt {
          width: 50px;
          height: 50px;
          float: left;
          background: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: 0.3s;
          span {
            cursor: pointer;
          }
        }
        .bt:hover {
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .next {
          float: right;
        }
      }
    }
    .level {
      width: 30000px;
      transition: .7s;
      .el-image {
        float: left;
      }
    }
  }
  .imgSmall {
    margin: 20px 0 0 0;
    width: 100%;
    float: left;
    .el-image {
      width: 80px;
      margin-right: 40px;
      opacity: 0.5;
      cursor: pointer;
      transition: 0.3s;
    }
    .el-image:hover {
      opacity: 1;
    }
  }
}
</style>